<template>
  <div class="article-container">
    <!-- 表单区域 -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>内容管理</el-breadcrumb-item>
      </el-breadcrumb>
      </div>
      <el-form ref="form"  label-width="80px">
        <el-form-item label="状态:">
          <el-radio-group v-model="status">
            <el-radio :label="null">全部</el-radio>
            <el-radio :label="0">草稿</el-radio>
            <el-radio :label="1">待审核</el-radio>
            <el-radio :label="2">审核通过</el-radio>
            <el-radio :label="3">审核失败</el-radio>
            <el-radio :label="4">已删除</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="频道:">
          <el-select v-model="channelId" placeholder="请选择">
            <el-option label="全部" :value="null"></el-option>
            <el-option v-for="(item, index) in channelsData" :label="item.name" :value="item.id"  :key="index"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="日期:">
          <el-date-picker
            v-model="timeRange"
            type="datetimerange"
            :picker-options="pickerOptions"
            :default-time="['12:00:00']"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :disabled="loading" @click=articlesLists(1)>筛选</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 数据区域 -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>根据筛选条件共查询到 {{totalCount}} 条结果：</span>
        <el-table
          stripe
          ref="filterTable"
          :data="articlesData"
          v-loading="loading"
          style="width: 100%
        ">
          <el-table-column
            prop="cover"
            label="封面"
          >
            <template slot-scope="scope">
              <el-image
                style="width: 150px; height: 100px"
                :src="scope.row.cover.images[0]"
                fit="cover"
                lazy
                >
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline"></i>
                </div>
              </el-image>
            </template>
          </el-table-column>
          <el-table-column
            prop="title"
            label="标题"
          >
          </el-table-column>
          <el-table-column
            prop="fengmian"
            label="状态"
          >
            <template slot-scope="scope">
              <!-- 如果需要在自定义列模板中获取当前遍历项数据，那么就在 template 上声明 slot-scope="scope" -->
              <el-tag v-if="scope.row.status === 0" type="warning">草稿</el-tag>
              <el-tag v-else-if="scope.row.status === 1">待审核</el-tag>
              <el-tag v-else-if="scope.row.status === 2" type="success">审核通过</el-tag>
              <el-tag v-else-if="scope.row.status === 3" type="danger">审核失败</el-tag>
              <el-tag v-else-if="scope.row.status === 4" type="info">已删除</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="pubdate"
            label="发布时间"
          >
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="medium"
                circle
                type="primary"
                icon="el-icon-edit"
                @click="$router.push('/publish?id='+scope.row.id.toString())"></el-button>
              <el-button
                size="medium"
                circle
                type="danger"
                icon="el-icon-delete"
                @click="onDeleteArticle(scope.row.id)"></el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination
        class="pagination"
        background
        layout="prev, pager, next"
        :total="totalCount"
        @current-change="currentPage"
        :disabled="loading"
        :page-size="pageSize"
        >
      </el-pagination>
    </el-card>
  </div>
</template>
<script>

import { articles, channels, deleteArticle } from '@/api/article'

export default {
  name: 'appArticle',
  data () {
    return {
      // 文章加载状态
      loading: true,
      pickerOptions: '',
      // 文章列表数据
      articlesData: [],
      // 文章数据条目
      totalCount: 0,
      // 每页大小
      pageSize: 10,
      // 文章状态
      status: null,
      // 文章频道列表
      channelsData: [],
      // 查询文章的频道
      channelId: null,
      // 时间范围
      timeRange: null,
      page: 1 // 当前页码
    }
  },
  methods: {
    // 获取文章列表
    async articlesLists (page = 1) {
      // 展示加载中 loading
      this.loading = true
      const res = await articles({ // 传参列表
        page, // 当前页
        per_page: this.pageSize, // 每页大小
        status: this.status, // 文章状态
        channel_id: this.channelId, // 文章频道
        begin_pubdate: this.timeRange ? this.timeRange[0] : null, // 开始日期
        end_pubdate: this.timeRange ? this.timeRange[1] : null // 截止日期
      })
      // es6解构赋值
      const { results, total_count: totalCount } = res.data.data
      this.articlesData = results
      this.totalCount = totalCount

      // 文章数据请求完成,关闭loading状态
      this.loading = false
    },
    // 分页
    currentPage (page) {
      this.articlesLists(page)
    },
    // 获取文章频道
    async channelsLists () {
      const res = await channels()
      this.channelsData = res.data.data.channels
    },
    // 删除文章
    onDeleteArticle (articleId) {
      // articleId = articleId.toString()
      this.$confirm('确认删除吗？', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        // 确认执行这里
        await deleteArticle(articleId)
        // 删除提示
        this.$message({
          type: 'success',
          message: '删除成功'
        })
        // 删除成功，更新当前页的文章数据列表
        this.articlesLists(this.page)
      })
    }
    // 编辑文章
  },
  created () {
    // 执行获取文章列表数据方法
    this.articlesLists(1)
    // 执行获取文章频道数据方法
    this.channelsLists()
  }
}
</script>
<style lang="less">
.article-container{
  .box-card{
    margin-bottom: 20px;
    .pagination{
      text-align: center;
    }
    .image-slot{
      height: 100%;
      background: #efefef;
      .el-icon-picture-outline{
        position: absolute;
        left:50%;
        top:50%;
        transform: translate(-50%,-50%);
        font-size: 30px;
      }
    }
  }
}
</style>
